<template>
  <div class="sureOrder">
    <el-breadcrumb separator="/" class="drugRecommend-breadcrumb">
      <el-breadcrumb-item
        ><span style="font-size: 16px">订单管理</span></el-breadcrumb-item
      >
      <el-breadcrumb-item
        ><span style="font-size: 18px">已确认订单</span></el-breadcrumb-item
      >
    </el-breadcrumb>

    <div class="center">
      <div class="filter">
        <el-button @click="lookAll">查看全部</el-button>
        <span class="addressFilter">地区筛选：</span
        ><el-cascader
          :options="options"
          :props="{ expandTrigger: 'hover' }"
          clearable
          v-model="areaArr"
          @change="chooseArea()"
        >
        </el-cascader>
        <el-button @click="selectWithAddress">筛选</el-button>
        <span class="search">精确搜索：</span>
        <el-input
          placeholder="请输入内容"
          v-model="input"
          class="input-with-select"
          clearable
        >
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="订单编号" value="1"></el-option>
            <el-option label="客户名" value="2"></el-option>
            <el-option label="联系方式" value="3"></el-option>
          </el-select>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchWithContent"
          ></el-button>
        </el-input>
      </div>
      <div class="table">
        <el-table :data="sureOrders" v-loading="loading" style="width: 100%">
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 6px">{{ scope.row.gmtCreate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" width="190">
            <template slot-scope="scope">
              <span>{{ scope.row.orderId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="客户名" width="90">
            <template slot-scope="scope">
              <span>{{ scope.row.receiptName }}</span>
            </template>
          </el-table-column>
          <!--<el-table-column label="联系方式" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.phone }}</span>
            </template>
          </el-table-column>-->
         <!-- <el-table-column label="所在地区" width="180">
            <template slot-scope="scope">
              <span>{{ showAddress(scope.row.receiptAddress) }}</span>
            </template>
          </el-table-column>-->
          <el-table-column label="服务人员+电话" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.emp }}{{ scope.row.empPhone }}</span>
            </template>
          </el-table-column>
          <el-table-column label="交易金额 (元)" width="110">
            <template slot-scope="scope">
              <span>￥{{ parseFloat(scope.row.payment).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <!--<el-table-column label="购买 (种)" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.itemAmount }} </span>
            </template>
          </el-table-column>-->
          <el-table-column label="签字图片" width="130" >
            <template slot-scope="scope">
              <el-image
                      style="width: 100px; height: 100px"
                      :src="scope.row.qmImg"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="交易状态" width="90">
            <template slot-scope="scope">
              <el-tag :type="type" size="medium">{{
                showStatus(scope.row.status)
              }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <OrderDetails
                :detailsInfo="scope.row"
                class="sureOrderDetails"
              >详细</OrderDetails>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import OrderDetails from "@/admin/order/components/OrderDetails";
export default {
  components: {
    OrderDetails,
  },
  data() {
    return {
      flag: 0,
      // 搜索的内容
      input: "",
      // 搜索的前缀
      select: "",
      // 选项
      options: regionData,
      // 选中的值用数组存储
      areaArr: [],
      // 筛选的地区
      receiptAddress: "",
      // tag的类型，根据status变化
      type:"",
      // 是否加载动画
      loading: true,
      // 已确认订单
      sureOrders: [],
      // 当前页
      current: 1,
      // 每页个数
      pageSize: 10,
      // 可选择每页个数
      pageSizes: [10, 20, 30, 50],
      // 总数
      total: 10,
    };
  },
  watch: {
    current: "getSureOrderList",
    pageSize: "getSureOrderList",
  },
  created() {
    this.getSureOrderList();
  },
  methods: {
    // 获取已确认订单
    getSureOrderList() {
      // 已确认的status == 4
      const status = 4;
      if (this.flag == 0) {
        this.$axios
          .get(
            "/admin/order/" + this.current + "/" + this.pageSize + "/" + status
          )
          .then((res) => {
            console.log("已确认订单==>", res);
            this.sureOrders = res.data.data.responseBody.orderList;
            for(var i=0;i<this.sureOrders.length;i++){
                this.sureOrders[i].qmImg = "http://localhost:9000/"+ this.sureOrders[i].qmImg
                // this.sureOrders[i].qmImg = "http://8.130.131.236:1313/"+ this.sureOrders[i].qmImg

            }
            this.total = res.data.data.responseBody.total;
            this.loading = false;
          });
      } else if (this.flag == 1) {
        let formData = new FormData();
        formData.append("receiptAddress", this.receiptAddress);
        formData.append("current", this.current);
        formData.append("size", this.pageSize);
        formData.append("status", status);
        this.$axios.post("/admin/orderWith/address", formData).then((res) => {
          console.log("已确认订单==>", res);
          this.sureOrders = res.data.data.responseBody.orderList;
          this.total = res.data.data.responseBody.total;
          this.loading = false;
        });
      } else if (this.flag == 2) {
        let formData = new FormData();
        formData.append("type", this.select);
        formData.append("content", this.input.trim());
        formData.append("current", this.current);
        formData.append("size", this.pageSize);
        formData.append("status", status);
        this.$axios.post("/admin/orderWith/search", formData).then((res) => {
          console.log("已确认订单==>", res);
          this.sureOrders = res.data.data.responseBody.orderList;
          this.total = res.data.data.responseBody.total;
          this.loading = false;
        });
      }
    },
    // 查看全部
    lookAll() {
      this.flag = 0;
      this.getSureOrderList();
    },
    // 根据地址筛选
    selectWithAddress() {
      if (this.receiptAddress != "") {
        this.flag = 1;
        this.getSureOrderList();
      }
    },
    // 搜索
    searchWithContent() {
      if (this.select != "" && this.input != "") {
        this.flag = 2;
        this.getSureOrderList();
      }
    },
    // 区域地址改变
    chooseArea() {
      // 展示的你选择的值 是一个areaCode
      console.log("chooseArea ==> ", this.areaArr);
      // 把areaCode转换成地名并拼接起来
      let str = "";
      for (let i = 0; i < this.areaArr.length; i++) {
        str += CodeToText[this.areaArr[i]] + "/";
      }
      console.log(str.substring(0, str.length - 1));
      this.receiptAddress = str.substring(0, str.length - 1);
    },
    // 去除地址的 / ，拼接
    showAddress(address) {
      if (address != "" && address != null) {
        let arr = address.split("/");
        let str = "";
        for (const item of arr) {
          str += item;
        }
        return str;
      }
    },
     /* 展示对应状态 */
    showStatus(status) {
      switch (status) {
        case -1:
          this.type = "danger";
          return "被投诉";
        case 0:
          this.type = "warning";
          return "交易取消";
        case 1:
          this.type = "info";
          return "未发货";
        case 2:
          this.type = "";
          return "已派单";
        case 4:
          this.type = "success";
          return "完成服务";
        default:
          return "未知";
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
    },
  },
};
</script>

<style scoped>
@import "./style/SureOrder.css";
</style>
